import { memo, useEffect } from 'react';
import { class_esy, Tabs } from 'esy-ui';
import { useParams } from 'react-router-dom';
import { useFormatText, useNavigation } from '@/hooks';
import InviteTask from './InviteTask';
import MyProfit from './MyProfit';
import InviteList from './InviteList';
import AllInfo from './AllInfo';

const titles = [
  {
    title: 'text_147',
    paneKey: '1',
    contentData: '1',
  },
  {
    title: 'text_148',
    paneKey: '2',
    contentData: '2',
  },
  {
    title: 'text_149',
    paneKey: '3',
    contentData: '3',
  },
  {
    title: 'text_150',
    paneKey: '4',
    contentData: '4',
  },
];

function RenderTitle(props: any) {
  const { title, isActive } = props;
  const { text } = useFormatText();

  useEffect(() => {}, []);

  return <div className={class_esy(['text-sm font-bold', isActive ? 'text-color-21' : ''])}>{text(title)}</div>;
}

function RenderContent({ data }: any) {
  if (data === '2') {
    return <InviteTask />;
  }
  if (data === '3') {
    return <MyProfit />;
  }
  if (data === '4') {
    return <InviteList />;
  }
  return <AllInfo />;
}

function List() {
  const params = useParams();
  const navigation = useNavigation();
  const actKey = params.type;

  const changeParam = (info: any) => {
    if (info?.paneKey) {
      navigation(`/bet/invite/${info?.paneKey}`, { replace: true });
    }
  };

  if (!actKey) return null;

  return (
    <Tabs
      tabs={titles}
      onTouchStart={changeParam}
      onClick={changeParam}
      defaultActiveKey={actKey}
      classNames={{ indicator: 'absolute bg-color-21 rounded-3xl transition-left-top duration-250 z-1', 'content:horizontal': 'w-full flex-1 whitespace-nowrap' }}
      renderTitle={<RenderTitle />}
      renderContent={<RenderContent />}
    />
  );
}

export default memo(List);
